﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="HealthManagementTemplate.OtherProfilePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HealthManagementTemplate"
    xmlns:common="using:HealthManagementTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="#778899">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Foreground="White" Text="Other Profiles"/>
        </Grid>

        <ScrollViewer x:Name="MainScroll"  Grid.Row="1"  Style="{StaticResource HorizontalScrollViewerStyle}">
            <StackPanel HorizontalAlignment="Left" Height="628" Margin="120,0,0,0" VerticalAlignment="Top" Width="1004" >
                <TextBlock HorizontalAlignment="Left" Height="60" Margin="5,0,0,0" TextWrapping="Wrap" Text="People" Width="150" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="40" Foreground="White" FontWeight="Light"/>
                <StackPanel HorizontalAlignment="Left" Margin="0,12,0,0" Width="1004" Height="555" VerticalAlignment="Top" Orientation="Horizontal">
                    <StackPanel Height="461" Margin="0" VerticalAlignment="Top" Width="361" HorizontalAlignment="Left">
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0,20,0,0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0,20,0,0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Height="461" Margin="20,0,0,0" VerticalAlignment="Top" Width="361" HorizontalAlignment="Left">
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0,20,0,0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Height="140" Margin="0,20,0,0" Width="360" VerticalAlignment="Top" Orientation="Horizontal" Background="#FF0C9DE6">
                            <Image Margin="0" Source="images/Image.png" Stretch="Fill" Width="140" Height="140" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                            <StackPanel HorizontalAlignment="Left" Height="84" Margin="21,38,0,0" VerticalAlignment="Top" Width="171" >
                                <TextBlock HorizontalAlignment="Left" Height="40" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI" FontSize="26.667" Width="170" FontWeight="Thin"/>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 1" Width="68" Foreground="White" VerticalAlignment="Top" Height="20" FontWeight="Thin"/>
                                </Grid>
                                <Grid Height="20" Margin="2,0,0,0" Width="125" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Data 2" Width="68" Foreground="White" VerticalAlignment="Bottom" Height="20" FontWeight="Thin"/>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Height="461" Margin="20,0,0,0" VerticalAlignment="Top" Width="240" HorizontalAlignment="Left">
                        <Grid Height="320" Width="240">
                            <Image Height="320" Margin="0" Source="images/remind.jpg" Stretch="Fill" Width="240" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <StackPanel HorizontalAlignment="Left" Margin="20,60,0,0" VerticalAlignment="Center" Width="190" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
                                <TextBlock HorizontalAlignment="Left" Height="65" TextWrapping="Wrap" Width="180" FontFamily="Segoe UI" FontSize="14.667">
        							<Run Text="Textblock"/>
        							<LineBreak/>
        							<Run Text="Textblock"/>
        							<LineBreak/>
        							<Run Text="Textblock"/>
                                </TextBlock>
                                <TextBlock HorizontalAlignment="Left" Height="65" TextWrapping="Wrap" Width="180" FontFamily="Segoe UI" FontSize="14.667" VerticalAlignment="Top" Margin="0,5,0,0">
        							<Run Text="Textblock"/>
        							<LineBreak/>
        							<Run Text="Textblock"/>
                                </TextBlock>
                                <TextBlock HorizontalAlignment="Left" Height="65" TextWrapping="Wrap" Width="180" FontFamily="Segoe UI" FontSize="14.667" Margin="0,5,0,0">
        							<Run Text="Textblock"/>
        							<LineBreak/>
        							<Run Text="Textblock"/>
                                </TextBlock>
                            </StackPanel>
                        </Grid>
                        <GridViewItem Margin="0,20,0,0" Width="250" Height="125" VerticalAlignment="Top" HorizontalAlignment="Center">
                            <Grid Width="240" Height="120" Background="#FFED0043">
                                <TextBlock HorizontalAlignment="Left" Height="30" Margin="23,38,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="128" FontSize="24" FontWeight="Thin">
        							<Run Text="Add More"/>
                                </TextBlock>
                                <Image Margin="0,10,15,0" Source="images/Plus1.png" Stretch="Fill" Width="60" Height="56" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                            </Grid>
                        </GridViewItem>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>

        <Grid x:Name="gridSnap" Visibility="Collapsed" Grid.Row="1">
            <StackPanel Margin="15,0,20,20" Orientation="Vertical" d:LayoutOverrides="Height">

                <TextBlock Foreground="#ffffff" TextWrapping="Wrap" FontSize="22" Margin="0,200,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold" >
                    <Run Text="Please switch to full screen to view the details."/>
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                    <Run Text="" />
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                </TextBlock>
            </StackPanel>
            <Image Margin="0,495,0,0" Source="Assets/Images/bg.jpg" Stretch="Fill"/>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup>
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridSnap" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainScroll" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
